<script setup lang="ts">
import {reactive} from 'vue'
import {dataProgressBar, panelProgressBar} from '@/components/svg-progress-bar'

const initData = reactive({
  progress: 0,
  angle: 0
})
</script>

<template>
  <dataProgressBar
    :progress="initData.progress"
  />
  <panelProgressBar
    :progress="initData.progress"
    :angle="initData.angle"
  />
  <p class="progress-range">
    <span>数据进度：</span>
    <input
      v-model="initData.progress"
      type="range"
      min="0"
      max="1"
      step="0.01"
    >&nbsp;{{ initData.progress }}
  </p>
  <p class="progress-range">
    <span>缺失角度进度：</span>
    <input
      v-model="initData.angle"
      type="range"
      min="0"
      max="1"
      step="0.01"
    >&nbsp;{{ initData.angle }}
  </p>
</template>

<style scoped lang="scss">
.progress-range {
  margin-top: 20px;

  @include flex(inital, flex-start, center);
}
</style>
